<script>
$(document).ready(function(){
    $("#registerForm").validate({ 
       
        rules: { 
            email: {
                required:true,
                email: true,
                emailCheck:true
            },
            password: { 
                required: true, 
                minlength: 6
            }, 
            captcha:{
                required: true,
                equalTo : '#captcha1' 
            },
            confirm: { 
                required: true,
                equalTo: "#password" 
            }, 
            
           
        }, 
            messages: { 
   
                password: { 
                    required: "Hãy điền mật khẩu", 
                    minlength: "Mật khẩu ít nhất 6 ký tự"
                }, 
                confirm: { 
                    required: "Hãy điền xác nhận mật khẩu",
                    equalTo: "Mật khẩu xác nhận không chính xác" 
                }, 
                email: { 
                    required: "Hãy nhập 1 địa chỉ email hợp lệ", 
                    email:"Địa chỉ email không hợp lệ", 
                    emailCheck:"Tên đăng nhập đã có người sử dụng"// thông báo lỗi
                },
                captcha : {
                    required: "Hãy nhập captcha",
                    equalTo: " Ma xác nhận không chính xác"   
                }
        }
    }); 
    jQuery.validator.addMethod('emailCheck', function(email) {

       var postURL = "/account/checkuser";

      $.ajax({
          
          cache:false,

          async:false,

          type: "POST",

          data: "email=" + email,

          url: postURL,

           success: function(msg) {
                if(msg==true){
                    result = false;
                }else {
                    result = true;
                }
             

         }

      });

        return result;

    }, '');
})
</script>
<script type="text/javascript">
    function check(str)
{

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("check").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/account/CheckUser?email="+str,true);
xmlhttp.send();
</script>
<style>
    label.error{
        color: red
    }
    
</style>

<form action="/account/register" method="post" id="registerForm">
    <div style="width: 700px; margin-left: auto; min-height: 500px; margin-right: auto;
        margin-top: 20px">
        <div style="width: 700px; height: 20px; border-bottom-style: solid; border-bottom-color: Gray;
            border-bottom-width: 0.5px; margin-bottom: 20px">
            <h3>Register New Member</h3>
        </div>        
        <div style="width: 500px; display: table; float: left;margin-top: 40px">
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Email:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <input type="text" style="width: 200px" name="email" id="email"  />
            </div>
            <div id="check"style=" width: 10px; float: left; margin-bottom: 10px ">
                
            </div>
            
            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Password:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <input type="password" style="width: 200px" name="password" id="password" />
            </div>
           
            <div style="  width: 10px; float: left; margin-bottom: 10px ">
                
            </div>
            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Confirm Password:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 25px">
                <input type="password" style="width: 200px" name="confirm" id="confirm" />
            </div> 
            <div style="  width: 10px; float: left; margin-bottom: 10px ">
                
            </div>
            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>First Name:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <input type="text" style="width: 200px" name="firstname" />
            </div>
            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Last Name:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <input type="text" style="width: 200px" name="lastname" />
            </div>       
            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Birthday:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <select tabindex="7" id="birthMonth" name="birthMonth">
                    <option selected="selected" value="" label="[Month]">[Month]</option>
                    <option value="01" label="Jan">Jan</option>
                    <option value="02" label="Feb">Feb</option>
                    <option value="03" label="Mar">Mar</option>
                    <option value="04" label="Apr">Apr</option>
                    <option value="05" label="May">May</option>
                    <option value="06" label="Jun">Jun</option>
                    <option value="07" label="Jul">Jul</option>
                    <option value="08" label="Aug">Aug</option>
                    <option value="09" label="Sep">Sep</option>
                    <option value="10" label="Oct">Oct</option>
                    <option value="11" label="Nov">Nov</option>
                    <option value="12" label="Dec">Dec</option>
                </select>
                <select tabindex="8" id="birthDay" name="birthDay">
                    <option selected="selected" value="" label="[Day]">[Day]</option>
                    <option value="1" label="1">1</option>
                    <option value="2" label="2">2</option>
                    <option value="3" label="3">3</option>
                    <option value="4" label="4">4</option>
                    <option value="5" label="5">5</option>
                    <option value="6" label="6">6</option>
                    <option value="7" label="7">7</option>
                    <option value="8" label="8">8</option>
                    <option value="9" label="9">9</option>
                    <option value="10" label="10">10</option>
                    <option value="11" label="11">11</option>
                    <option value="12" label="12">12</option>
                    <option value="13" label="13">13</option>
                    <option value="14" label="14">14</option>
                    <option value="15" label="15">15</option>
                    <option value="16" label="16">16</option>
                    <option value="17" label="17">17</option>
                    <option value="18" label="18">18</option>
                    <option value="19" label="19">19</option>
                    <option value="20" label="20">20</option>
                    <option value="21" label="21">21</option>
                    <option value="22" label="22">22</option>
                    <option value="23" label="23">23</option>
                    <option value="24" label="24">24</option>
                    <option value="25" label="25">25</option>
                    <option value="26" label="26">26</option>
                    <option value="27" label="27">27</option>
                    <option value="28" label="28">28</option>
                    <option value="29" label="29">29</option>
                    <option value="30" label="30">30</option>
                    <option value="31" label="31">31</option>
                </select>
                <select tabindex="9" id="birthYear" name="birthYear">
                    <option selected="selected" value="" label="[Year]">[Year]</option>
                    <option value="2011" label="2011">2011</option>
                    <option value="2010" label="2010">2010</option>
                    <option value="2009" label="2009">2009</option>
                    <option value="2008" label="2008">2008</option>
                    <option value="2007" label="2007">2007</option>
                    <option value="2006" label="2006">2006</option>
                    <option value="2005" label="2005">2005</option>
                    <option value="2004" label="2004">2004</option>
                    <option value="2003" label="2003">2003</option>
                    <option value="2002" label="2002">2002</option>
                    <option value="2001" label="2001">2001</option>
                    <option value="2000" label="2000">2000</option>
                    <option value="1999" label="1999">1999</option>
                    <option value="1998" label="1998">1998</option>
                    <option value="1997" label="1997">1997</option>
                    <option value="1996" label="1996">1996</option>
                    <option value="1995" label="1995">1995</option>
                    <option value="1994" label="1994">1994</option>
                    <option value="1993" label="1993">1993</option>
                    <option value="1992" label="1992">1992</option>
                    <option value="1991" label="1991">1991</option>
                    <option value="1990" label="1990">1990</option>
                    <option value="1989" label="1989">1989</option>
                    <option value="1988" label="1988">1988</option>
                    <option value="1987" label="1987">1987</option>
                    <option value="1986" label="1986">1986</option>
                    <option value="1985" label="1985">1985</option>
                    <option value="1984" label="1984">1984</option>
                    <option value="1983" label="1983">1983</option>
                    <option value="1982" label="1982">1982</option>
                    <option value="1981" label="1981">1981</option>
                    <option value="1980" label="1980">1980</option>
                    <option value="1979" label="1979">1979</option>
                    <option value="1978" label="1978">1978</option>
                    <option value="1977" label="1977">1977</option>
                    <option value="1976" label="1976">1976</option>
                    <option value="1975" label="1975">1975</option>
                    <option value="1974" label="1974">1974</option>
                    <option value="1973" label="1973">1973</option>
                    <option value="1972" label="1972">1972</option>
                    <option value="1971" label="1971">1971</option>
                    <option value="1970" label="1970">1970</option>
                    <option value="1969" label="1969">1969</option>
                    <option value="1968" label="1968">1968</option>
                    <option value="1967" label="1967">1967</option>
                    <option value="1966" label="1966">1966</option>
                    <option value="1965" label="1965">1965</option>
                    <option value="1964" label="1964">1964</option>
                    <option value="1963" label="1963">1963</option>
                    <option value="1962" label="1962">1962</option>
                    <option value="1961" label="1961">1961</option>
                    <option value="1960" label="1960">1960</option>
                    <option value="1959" label="1959">1959</option>
                    <option value="1958" label="1958">1958</option>
                    <option value="1957" label="1957">1957</option>
                    <option value="1956" label="1956">1956</option>
                    <option value="1955" label="1955">1955</option>
                    <option value="1954" label="1954">1954</option>
                    <option value="1953" label="1953">1953</option>
                    <option value="1952" label="1952">1952</option>
                    <option value="1951" label="1951">1951</option>
                    <option value="1950" label="1950">1950</option>
                    <option value="1949" label="1949">1949</option>
                    <option value="1948" label="1948">1948</option>
                    <option value="1947" label="1947">1947</option>
                    <option value="1946" label="1946">1946</option>
                    <option value="1945" label="1945">1945</option>
                    <option value="1944" label="1944">1944</option>
                    <option value="1943" label="1943">1943</option>
                    <option value="1942" label="1942">1942</option>
                    <option value="1941" label="1941">1941</option>
                    <option value="1940" label="1940">1940</option>
                    <option value="1939" label="1939">1939</option>
                    <option value="1938" label="1938">1938</option>
                    <option value="1937" label="1937">1937</option>
                    <option value="1936" label="1936">1936</option>
                    <option value="1935" label="1935">1935</option>
                    <option value="1934" label="1934">1934</option>
                    <option value="1933" label="1933">1933</option>
                    <option value="1932" label="1932">1932</option>
                    <option value="1931" label="1931">1931</option>
                    <option value="1930" label="1930">1930</option>
                    <option value="1929" label="1929">1929</option>
                    <option value="1928" label="1928">1928</option>
                    <option value="1927" label="1927">1927</option>
                    <option value="1926" label="1926">1926</option>
                    <option value="1925" label="1925">1925</option>
                    <option value="1924" label="1924">1924</option>
                    <option value="1923" label="1923">1923</option>
                    <option value="1922" label="1922">1922</option>
                    <option value="1921" label="1921">1921</option>
                    <option value="1920" label="1920">1920</option>
                    <option value="1919" label="1919">1919</option>
                    <option value="1918" label="1918">1918</option>
                    <option value="1917" label="1917">1917</option>
                    <option value="1916" label="1916">1916</option>
                    <option value="1915" label="1915">1915</option>
                    <option value="1914" label="1914">1914</option>
                    <option value="1913" label="1913">1913</option>
                    <option value="1912" label="1912">1912</option>
                    <option value="1911" label="1911">1911</option>
                </select>                          
            </div>
                            
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Sex:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
                <select id="slSex" name="sex" style="width: 100px">
                    <option value="False">Female</option>
                    <option value="True">Male</option>
                </select>
            </div>
            <div style="width: 150px; float: left; margin-bottom: 10px"></div>
            <div>
            	<?php echo Captcha::Generate(); 
                        
                ?>
            </div>
            <div>
                <input type="hidden" value="<?php echo $_SESSION['code'] ?>" name="captcha1" id="captcha1"/>
            </div>
            <div style="width: 150px; float: left; margin-bottom: 10px">
                <label>Captcha:</label>
            </div>
            <div style="width: 210px; float: left; margin-bottom: 10px">
            	<input type="text" style="width: 200px" name="captcha" id="captcha" />	
            </div>	
            <div style="width: 150px; float: left; margin-bottom: 10px">
            </div>
            <div class="login-row" style="padding-top: 60px; text-align:center;"><input type="submit" value="Register" id="btRegister" name="submit"/></div>
            
            <div class="login-row" style="padding-top: 60px; text-align:center;">
                <label>
                    If you have a account!
                </label>
                <a href="/account/login" style="font-weight: bold; color: #1767ff">Login>></a>
            </div>
		</div>
	</div>
    
</form>